<template>
  <Layout class="p-5 bg-white">
    <div class="demo-split">
      <Split>
        <!--学生个人详细-->
        <div slot="left" class="demo-split-pane">
          <Form :label-width="100">
            <FormItem class="w-40" label="学生姓名">
              <label>{{ student.name }}</label>
            </FormItem>

            <FormItem class="w-40" label="住址">
              <label>{{ student.address }}</label>
            </FormItem>

            <FormItem class="w-40" label="电话">
              <label>{{ student.tel }}</label>
            </FormItem>

            <FormItem class="w-40" label="银行预留电话">
              <label>{{ student.tel }}</label>
            </FormItem>

            <FormItem class="w-40" label="邮箱">
              <label>{{ student.email }}</label>
            </FormItem>

            <FormItem class="w-40" label="毕业院校">
              <label>{{ student.gradute }}</label>
            </FormItem>

            <FormItem class="w-40" label="专业">
              <label>{{ student.major }}</label>
            </FormItem>

            <FormItem class="w-40" label="学历">
              <label>{{ student.degree }}</label>
            </FormItem>

            <FormItem class="w-40" label="学生线索来源">
              <label>{{ resource.source }}</label>
            </FormItem>

            <FormItem class="w-40" label="应聘职位">
              <label>{{ resource.ypzw }}</label>
            </FormItem>

            <FormItem class="w-40" label="csgz">
              <label>{{ resource.csgz }}</label>
            </FormItem>

            <FormItem class="w-40" label="投递公司名称">
              <label>{{ resource.tdgsmc }}</label>
            </FormItem>

            <FormItem class="w-40" label="线索备注">
              <label>{{ resource.bz }}</label>
            </FormItem>

            <FormItem class="w-40" label="身份证号">
              <label>{{ student.secId }}</label>
            </FormItem>

            <FormItem class="w-40" label="身份证正面">
              <label v-if="student.secFrontUrl != ''">
                <img
                  style="width:180px;height:100px"
                  :src="student.secFrontUrl"
                />
              </label>
            </FormItem>

            <FormItem class="w-40" label="身份证反面">
              <label v-if="student.secBackUrl != ''">
                <img
                  style="width:180px;height:100px"
                  :src="student.secBackUrl"
                />
              </label>
            </FormItem>

            <FormItem class="w-40" label="身份证手持">
              <label v-if="student.secHandleUrl != ''">
                <img
                  style="width:180px;height:100px"
                  :src="student.secHandleUrl"
                />
              </label>
            </FormItem>
          </Form>
        </div>

        <!--学生生命周期-->
        <div slot="right" class="demo-split-pane">
          <TimelineItem v-for="(item, i) in this.lifeCyclePOJO">
            <!-- v-for -->
            <p class="time">{{ item.onThatDay }}</p>
            <p class="content" v-for="(message, i) in item.onThatDayMessage">
              {{ message }}
            </p>
          </TimelineItem>
        </div>
      </Split>
    </div>
  </Layout>
</template>

<script>
export default {
  data() {
    return {
      splist1: 0.5,
      student: {
        id: null,
        name: '',
        secId: null,
        secFrontUrl: '',
        secBackUrl: '',
        secHandleUrl: '',
        tel: '',
        birth: '',
        graduateTime: null,
        gradute: '',
        degree: '',
        major: '',
        accountTel: '',
        email: '',
        address: '',
      },
      resource: {
        id: null,
        source: '',
        statu: '',
        ypzw: '',
        csgz: '',
        tdgsmc: '',
        bz: '',
        autor: '',
        stageId: '',
      },
      lifeCyclePOJO: null,
    } //return
  },
  methods: {
    cancel: function() {
      this.$tabs.close()
    },
    init: function() {
      let _this = this
      //获取学生个人详情
      this.http
        .get({
          url: '/student/info/' + this.$route.params.row.studentId,
        })
        .then((data) => {
          _this.student.name = data.student.name
          _this.student.secId = data.student.secId
          _this.student.secFrontUrl = data.student.secFrontUrl
          _this.student.secBackUrl = data.student.secBackUrl
          _this.student.secHandleUrl = data.student.secHandleUrl
          _this.student.birth = data.student.birth
          _this.student.graduateTime = data.student.graduateTime
          _this.student.gradute = data.student.graduate
          _this.student.degree = data.student.degree
          _this.student.major = data.student.major
          _this.student.tel = data.student.tel
          _this.student.accountTel = data.student.accountTel
          _this.student.address = data.student.address
          _this.student.email = data.student.email
          _this.resource.source = data.resource.source
          _this.resource.statu = data.resource.statu
          _this.resource.ypzw = data.resource.ypzw
          _this.resource.csgz = data.resource.csgz
          _this.resource.bz = data.resource.bz
          _this.resource.autor = data.resource.autor
          _this.resource.stageId = data.resource.stageId
          _this.resource.tdgsmc = data.resource.tdgsmc
          _this.resource.bz = data.resource.bz
        })

      //获取学生生命周期
      this.http
        .get({
          url: '/lifeCycle/list/' + this.$route.params.row.studentId,
        })
        .then((data) => {
          this.lifeCyclePOJO = data
        })
    },
  },
  watch: {
    $route(row) {
      this.init(row)
    },
  },
  created: function() {
    this.init()
  },
}
</script>

<style>
.demo-split {
  height: 100rem;
  border: 1px solid #dcdee2;
}

.demo-split-pane {
  padding: 10px;
}

.time {
  font-size: 14px;
  font-weight: bold;
}

.content {
  padding-left: 5px;
}
</style>
